<!DOCTYPE html>
<html lang="en-US">
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>Flusk</title>
	<style>
		ul {
	    	list-style-type: none;
	   		margin: 0;
	    	padding: 0;
	    	width: 200px;
	    	background-color: #D8D8D8;
		} 
		li a {
	    	display: block;
	    	color: #000000;
	   		padding: 8px 16px;
	    	text-decoration: none;
		}
		
		li a:hover {
	    	background-color: #787878;
	    	color: white;
		}
		html{
			width:100%;
     		height:100%;
 		}
		body{
			width:100%; 
    		height:100%;
		}
		*{
			margin:0; 
    		padding:0; 
		}
		.main {  
  			position: fixed;
		    width:0px;
		    overflow: visible;
		    right:0px;
		    position:absolute;
		    z-index:2
		}
		.nav{
		display: inline-block;
		float: right;
		   clear: both;
		}
		.a{
		position: relative;
		left: 50%;
		padding: 10px 30px 10px 60px;
		margin: 10px;
		background: #8DC2BC;
		x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);
		  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);
		  transition: all 0.3s ease-in-out 0.1s;
		  -o-transition: all 0.3s ease-in-out 0.1s;
		  -ms-transition: all 0.3s ease-in-out 0.1s;
		  -moz-transition: all 0.3s ease-in-out 0.1s;
		  -webkit-transition: all 0.3s ease-in-out 0.1s;
		}
		.a:hover{
		position: relative;
		right: 100%;
		margin-left: -50%;
		        background-color: rgba(27, 79, 147,0.5); 
		  box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.5),
		    0 8px 8px -8px rgba(0, 0, 0, 0.5);
		  transition: all 0.3s ease-in-out;
		  -o-transition: all 0.3s ease-in-out;
		  -ms-transition: all 0.3s ease-in-out;
		  -moz-transition: all 0.3s ease-in-out;
		  -webkit-transition: all 0.3s ease-in-out;
		}
		.span{
		  display: inline-block;
		     color: #fff;
		     font-family: 'Droid Sans', sans-serif;
		  font-size: 16px;
		     font-weight: bold;
		  white-space: nowrap;
		}
		a:hover #bg1{ background: #539770; }
		a:hover #bg2{ background: #4B7D74; }
		a:hover #bg3{ background: #8DC2BC; }
		a:hover #bg4{ background: #EDD6B4; }
		a:hover #bg5{ background: #BE7467; }
		a:hover #bg6{ background: #E2AE63; }
	</style>
	</head>	

	<body>
		<div class="main">
			<div class="nav">
			   <div class="a">
			    <a href="#">
			    <span class="span" id="bg1">item #1</span>
			    </a>
			   </div>  
			</div>
			<div class="nav" >
			   <div class="a">
			    <a href="#">
			    <span class="span" id="bg2" >item #2</span>
			    </a>
			   </div>
			</div>
			<div class="nav">
			   <div class="a">
			    <a href="#">
			    <span class="span" id="bg3">item #3</span>
			    </a>
			   </div>  
			</div>
			<div class="nav">
			   <div class="a">
			    <a href="#">
			    <span class="span" id="bg4">item #4</span>
			    </a>
			   </div>  
			</div>
			<div class="nav">
			   <div class="a">
			    <a href="#">
			    <span class="span" id="bg5">item #5</span>
			    </a>
			   </div>  
			</div>
			<div class="nav">
			   <div class="a">
			    <a href="#">
			    <span class="span" id="bg6">item #6</span>
			    </a>
				</div>
			</div>
		</div>

		<div id="container" style="height:100%;width:100%;background-image:url(../depinfo_static/images/blue_mac2.jpg);background-size:cover;position:absolute;z-index:1">
			<div class="header-wrapper-inner">
				<div id="header"  style="background-color:0;height:5%;">						
							<h1 href="index.html" style="font-size:20px;font-family: 'Alegreya SC';color:white;" >Flusk</h1>
				</div>
			</div>
			<div id="menu" style="background-color:0;height:92%;width:10%;float:left;">
				<h1 style="font-size:16px;font-family: 'Alegreya SC';color:black;">
					<a href="">首页</a><a>-></a><a href="/dep_info/">文档</a>
				</h1>
				<ul style="height:100%;width:100%;background-color:rgba(255,255,255,0)">
					{% for data in datas %}
						<li ><a href="">{{ data.title }}</a></li>
					{% endfor %}
				</ul>
			</div>
			<div id="content" style="background-color:0;height:92%;width:90%;float:left;color:black">
				{% for data in datas %}
					<p>{{ data.content }}</p>
				{% endfor %}
			</div>
			<div id="myfooter" style="background-color:0;height:3%;width:auto;clear:both;text-align:center;">
				<p>By @mdmhdc</p>
			</div>
		</div>
	</body>
</html>